<!--医生页面：用户详情-->
<template>
  <div class="MyContainer">
    <el-tabs v-model="activeName" class="demo-tabs" >

      <!-- 用户信息界面 -->
      <el-tab-pane label="用户信息" name="first">用户信息
        <el-descriptions :column="3"  border>
          <el-descriptions-item label="姓名">{{cusInfo.cusName}}</el-descriptions-item>
          <el-descriptions-item label="性别">男</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ cusInfo.cusOld }}</el-descriptions-item>
          <el-descriptions-item label="民族">汉</el-descriptions-item>
          <el-descriptions-item label="电话号码">{{ cusInfo.cusPhonenum }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ cusInfo.cusIdentity }}</el-descriptions-item>
          <el-descriptions-item label="住址" :span="2">{{ cusInfo.cusAddress }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
            
      <!-- 健康评估界面 -->
      <el-tab-pane label="健康评估" name="second">健康评估
        <el-descriptions :column="2"  border>
          <el-descriptions-item label="身高">{{ cusHealthInfo.hiHeight }}</el-descriptions-item>
          <el-descriptions-item label="体重">{{ cusHealthInfo.hiWeight }}</el-descriptions-item>
          <el-descriptions-item label="脉搏">60次/分钟</el-descriptions-item>
          <el-descriptions-item label="呼吸频率">80次/分钟</el-descriptions-item>
          <el-descriptions-item label="血压低值">73.0mmHg</el-descriptions-item>
          <el-descriptions-item label="血压峰值">{{ cusHealthInfo.hiPressure }} mmHg</el-descriptions-item>
          <el-descriptions-item label="血糖">{{ cusHealthInfo.hiGloucose }} mmHg</el-descriptions-item>
          <el-descriptions-item label="血脂">{{ cusHealthInfo.hiLipids }} mmHg</el-descriptions-item>
          <el-descriptions-item label="血氧浓度">{{ cusHealthInfo.hiSao2 }} mmHg</el-descriptions-item>
          <el-descriptions-item label="骨密度">{{cusHealthInfo.hiBonedensity }}mmHg</el-descriptions-item>
          <el-descriptions-item label="认知状态">清醒</el-descriptions-item>
          <el-descriptions-item label="评估时间">2020-03-04</el-descriptions-item>
          <el-descriptions-item label="健康评价" :span="2">很差</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <!-- 健康履历界面 -->
      <el-tab-pane label="健康履历" name="third">
        <div><span>健康履历</span></div>
        <el-button class="mt-4" type="primary" style="width: 100%;float: right;margin-top: 10px;" 
                    size="small" @click="dialogFormVisible = true">
          <el-icon style="margin-right:5px"><Plus /></el-icon>添加伤病记录
        </el-button>
        <el-table :data="tableData_treat" style="width: 100%;margin-top: 40px;">
          <el-table-column prop="treatTime" label="就诊时间" width="150" />
          <el-table-column prop="info" label="伤病简述" width="150" />
          <el-table-column prop="docName" label="主治医生" width="150" />
          <el-table-column prop="operation" label="操作" width="120" />
          <el-table-column prop="treatAppend" label="备注" width="500" />
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="deleteRow_treat(scope.row.treatId)">删除记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-dialog v-model="dialogFormVisible" title="请按要求填写就诊记录" draggable open="applyDoc">
            <el-form :model="tableData_treat">
                <el-form-item label="就诊时间" :label-width="formLabelWidth">
                  <div class="block">
                    <el-date-picker v-model="input_treattime" type="date" placeholder="必选"
                                  :disabled-date="disabledDate" :shortcuts="shortcuts" />
                  </div>
                </el-form-item>
                <el-form-item label="伤病简述" :label-width="formLabelWidth">
                  <el-input v-model="input_info" autocomplete="off" placeholder="必填"/>    
                </el-form-item>
                <el-form-item label="操作" :label-width="formLabelWidth">
                  <el-input v-model="input_operation" autocomplete="off" />    
                </el-form-item>
                
                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input v-model="input_treatappend" maxlength="100" placeholder="请简述病情" show-word-limit type="textarea" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="Add_treat();dialogFormVisible = false">确定</el-button>
                </span>
            </template>
        </el-dialog>

      </el-tab-pane>

      <!-- 用药记录界面 -->
      <el-tab-pane label="用药记录" name="fourth">
        <div><span>用药记录</span>
        </div>
          <el-button class="mt-4" type="primary" style="width: 100%;float: right;margin-top:10px;" size="small" @click="onAddItem3">
            <el-icon style="margin-right:5px"><Plus /></el-icon>添加用药记录
          </el-button>
          <el-table :data="tableData3" style="width: 100%;margin-top: 40px;" max-height="250">
            <el-table-column fixed prop="medName" label="药物名称" width="120" />
            <el-table-column prop="medTime" label="服用时间" width="200" />
            <el-table-column prop="medMethod" label="服用方式" width="200" />
            <el-table-column prop="medAmount" label="服用数量" width="200" />
            <el-table-column prop="medPeirod" label="服用疗程" width="200" /> 
            <el-table-column fixed="right" label="操作" >
              <template #default="scope">
                <el-button link type="primary" size="small" @click.prevent="deleteRow3(scope.$index)">删除记录</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          

      </el-tab-pane>
    
    </el-tabs>
	</div>
</template>

<script setup lang="ts" name="contracted-user">
import { ref, reactive, VueElement } from 'vue'
import dayjs from 'dayjs'
import { getCusInfo,getillness,addillness,delillness } from '../api/manager.js'
import { useRoute } from 'vue-router';
import { ElMessage,ElMessageBox } from 'element-plus'
//window.location.replace(location.href)

const activeName = ref('first')
const now = new Date()
const use = useRoute()
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const cusInfo = reactive({
  cusName:'',
  cusOld:'',
  cusPhonenum:'',
  cusIdentity:'',
  cusAddress:''
})

const cusHealthInfo = reactive({
  hiAge:'',
  hiBonedensity:'',
  hiGloucose:'',
  hiHeight:'',
  hiPressure:'',
  hiLipids:'',
  hiSao2:'',
  hiWeight:''
})

interface TableItem_treat {
  treatId:string;
  info : string;
  operation:string;
  treatAppend:string;
  treatTime:string;
  docName:string;
}
const tableData_treat = ref<TableItem_treat[]>([]);

interface TableItem3 {
  medAmount:number;
  medMethod:string;
  medName:string;
  medPeirod:string;
  medTime:string;
}
const tableData3 = ref<TableItem3[]>([]);

const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      //console.log(JSON.stringify(date).slice(1,11))
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const getData = () =>{
  console.log(use.query.id)
  getCusInfo(use.query.id).then(res =>{
    if(res.code == 200){
      //custom数据
      var cus = res.data.customer
      cusInfo.cusAddress = cus.cusAddress
      cusInfo.cusIdentity = cus.cusIdentity
      cusInfo.cusName = cus.cusName
      cusInfo.cusOld = cus.cusOld
      cusInfo.cusPhonenum = cus.cusPhonenum

      //健康数据
      var cushealth = res.data.healthinfo
      cusHealthInfo.hiAge = cushealth.hiAge
      cusHealthInfo.hiBonedensity = cushealth.hiBonedensity
      cusHealthInfo.hiGloucose = cushealth.hiGloucose
      cusHealthInfo.hiHeight = cushealth.hiHeight
      cusHealthInfo.hiLipids = cushealth.hiLipids
      cusHealthInfo.hiPressure = cushealth.hiPressure
      cusHealthInfo.hiSao2 = cushealth.hiSao2
      cusHealthInfo.hiWeight = cushealth.hiWeight

      tableData3.value = res.data.med
    }
  }).catch(err =>{console.log("请求失败")})
}
getData();

const getData_treat = () =>{
  //获取伤病信息
  tableData_treat.value=undefined
  tableData_treat.value=new Array()
  getillness(use.query.id).then(res=>{
    //console.log("res",res)
    for(var i=0;i<res.data.length;i++){
      var cus_treat=res.data[i]
      tableData_treat.value.push({
        treatId:cus_treat.treatId,
        info : cus_treat.info,
        operation:cus_treat.operation,
        treatAppend:cus_treat.treatAppend,
        treatTime:cus_treat.treatTime.slice(0,10),
        docName:cus_treat.docName,
      })
    }
  }).catch(err =>{console.log("请求失败")})
}
getData_treat();

//删除用户伤病记录
const deleteRow_treat = (index: number) => {
  ElMessageBox.confirm(
    '请确定是否删除此条记录',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      delillness(index).then(res=>{
        ElMessage({
          type: 'info',
          message: '删除成功',
        })
        getData_treat();
      }).catch(err=>{
        console.log(err)
        ElMessage({
          type: 'info',
          message: '删除失败',
        })
      })
    }
  )
}

const deleteRow3 = (index: number) => {
  tableData3.value.splice(index, 1)
}

//添加伤病记录
const input_treattime=ref(''),input_operation=ref('')
const input_treatappend=ref(''),input_info=ref('')
const Add_treat = () => {
  const item = {
    cusId:use.query.id,
    info : input_info.value,
    operation:input_operation.value,
    treatAppend:input_treatappend.value,
    treatTime:JSON.stringify(input_treattime.value).slice(1,11)+' 00:00:00',
    cusName:cusInfo.cusName,
  };
  if(item.treatTime!=null && item.info!=''){
    addillness(JSON.stringify(item)).then(res=>{
      ElMessage({
        type: 'info',
        message: '添加成功',
      })
      getData_treat()
    }).catch(err=>{console.log(err)})
  }else{
    ElMessage({
      type: 'info',
      message: '请填写完整',
    })
  }
  
}

const onAddItem3 = () => {
  now.setDate(now.getDate() + 1)
  tableData3.value.push({
    medName:'阿莫西林',
    medTime: dayjs(now).format('YYYY-MM-DD'),
    medMethod: '口服',
    medPeirod:'一日一片',
    medAmount:5,
  })
}
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}

</style>